<template>
	<view class="user-container">
		<view class="header">
			<view class="user-info" v-if="isLogin">
				<image :src="userInfo.avatar || defaultAvatar" class="avatar"></image>
				<view class="info">
					<text class="username">{{ userInfo.nickName}}</text>
				</view>
			</view>
			<view class="login-btn" v-else @click="goToLogin">
				<image :src="defaultAvatar" class="avatar"></image>
				<text class="login-text">点击登录</text>
			</view>
		</view>
		
		<view class="content">
			<view class="order-section">
				<view class="order-types">
					<view class="order-type" @click="goToOrderList('unpaid')">
						<image src="/static/user/unpaid.png" class="order-icon"></image>
						<text class="order-text">待付款</text>
					</view>
					<view class="order-type" @click="goToOrderList('unshipped')">
						<image src="/static/user/unshipped.png" class="order-icon"></image>
						<text class="order-text">待发货</text>
					</view>
					<view class="order-type" @click="goToOrderList('shipped')">
						<image src="/static/user/shipped.png" class="order-icon"></image>
						<text class="order-text">待收货</text>
					</view>
					<view class="order-type" @click="goToOrderList('refund')">
						<image src="/static/user/refund.png" class="order-icon"></image>
						<text class="order-text">退款</text>
					</view>
					<view class="divider"></view>
					<view class="order-type" @click="goToOrderList('all')">
						<image src="/static/user/all.png" class="order-icon"></image>
						<text class="order-text">全部订单</text>
					</view>
				</view>
			</view>
			
			<view class="menu-section">
				<view class="menu-item" @click="goToAddress">
					<image src="/static/user/address.png" class="menu-icon"></image>
					<text class="menu-text">收货地址</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="goToFavorites">
					<image src="/static/user/favorite.png" class="menu-icon"></image>
					<text class="menu-text">我的收藏</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="goToCoupon">
					<image src="/static/user/coupon.png" class="menu-icon"></image>
					<text class="menu-text">优惠券</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="goToCustomerService">
					<image src="/static/user/customer-service.png" class="menu-icon"></image>
					<text class="menu-text">客服</text>
					<text class="menu-arrow">></text>
				</view>
			</view>
			
			<view class="logout-section" v-if="isLogin">
				<button class="logout-btn" @click="handleLogout">退出登录</button>
			</view>
		</view>
	</view>
</template>

<script>
import routeGuard from '@/utils/routeGuard.js'
import { mapGetters, mapActions } from 'vuex'

export default {
	data() {
		return {
			orderCount: {
				unpaid: 2,
				unshipped: 1,
				shipped: 3,
				refund: 10
			},
			defaultAvatar: 'https://iknow-pic.cdn.bcebos.com/37d3d539b6003af33f4facfe272ac65c1138b6b2',
		}
	},
	computed: {
		...mapGetters(['getUserInfo', 'getIsLogin']),
		
		// 使用store中的用户信息
		userInfo() {
			return this.getUserInfo || {}
		},
		
		// 使用store中的登录状态
		isLogin() {
			return this.getIsLogin
		}
	},
	onLoad() {

	},
	onShow() {
	
	},

	methods: {
		...mapActions(['logout']),
		
		// 加载订单数量
		loadOrderCount() {
			// 这里可以调用API获取各状态订单数量
			console.log('加载订单数量')
		},
		
		// 跳转到登录页
		goToLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		},
		
		// 跳转到订单列表
		goToOrderList(type) {
			let url = '/pages/order/index'
			if (type) {
				url += `?type=${type}`
			}
			uni.navigateTo({
				url
			})
		},
		
		// 跳转到地址管理
		goToAddress() {
			uni.navigateTo({
				url: '/pages/address/list'
			})
		},
		
		// 跳转到收藏列表
		goToFavorites() {
			uni.navigateTo({
				url: '/pages/favorite/favorite'
			})
		},
		
		// 跳转到浏览历史
		goToHistory() {
			uni.navigateTo({
				url: '/pages/history/list'
			})
		},
		
		// 跳转到优惠券
		goToCoupon() {
			uni.navigateTo({
				url: '/pages/coupon/coupon'
			})
		},
		
		// 跳转到客服
		goToCustomerService() {
			uni.navigateTo({
				url: '/pages/service/index'
			})
		},
		
		// 退出登录
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 使用store中的logout方法
						this.logout()
						
						// 显示提示
						uni.showToast({
							title: '已退出登录',
							icon: 'success'
						})
						
						// 延迟跳转，让用户看到提示
						setTimeout(() => {
							// 使用路由守卫的退出登录方法
							routeGuard.logout()
						}, 1000)
					}
				}
			})
		}
	}
}
</script>

<style>
.user-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
}

.header {
	padding: 40rpx 30rpx;
	background-color: #e93b3d;
	color: #fff;
}

.user-info, .login-btn {
	display: flex;
	align-items: center;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin-right: 30rpx;
}

.info {
	display: flex;
	flex-direction: column;
}

.username {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.user-level {
	font-size: 26rpx;
	opacity: 0.8;
}

.login-text {
	font-size: 36rpx;
	font-weight: bold;
}

.content {
	flex: 1;
	overflow: hidden;
}

.order-section {
	background-color: #fff;
	margin: 20rpx;
	border-radius: 10rpx;
	padding: 20rpx;
}

.order-types {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.order-type {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 25%;
}

.order-icon {
	width: 50rpx;
	height: 50rpx;
	margin-bottom: 10rpx;
}

.order-text {
	font-size: 26rpx;
	color: #333;
}

.divider {
	width: 1px;
	height: 60rpx;
	background-color: #e0e0e0;
	margin: 0 10rpx;
}


.menu-section {
	background-color: #fff;
	margin: 20rpx;
	border-radius: 10rpx;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1px solid #f5f5f5;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
}

.menu-text {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.menu-arrow {
	font-size: 28rpx;
	color: #999;
}

.logout-section {
	padding: 40rpx 20rpx;
}

.logout-btn {
	background-color: #fff;
	color: #e93b3d;
	border: 1px solid #e93b3d;
	border-radius: 30rpx;
	padding: 20rpx 0;
	font-size: 30rpx;
}
</style>